<template>
	<view class="delivery">
		<statusBar />

		<view class="header">
			<view class="stores">
				<view>
					<image src="../../static/home/tianchong.png" mode=""></image>
					<view>门店暂未营业</view>
				</view>
				<view @tap="camp">开门营业</view>
			</view>
			<!-- 待处理 -->
			<view class="processed">
				<view>
					<view :class="{ acions: typeIndex === index }" v-for="(item, index) in Deal" @tap="clickAdd(index)" :key="index">{{ item.name }}</view>
				</view>
				<view>
					<view @tap="Since">
						<view>自提订单</view>
						<view><image src="../../components/min-collapse/arrow.png" mode=""></image></view>
					</view>
					<!-- <image src="../../static/home/zu.png" mode=""></image> -->
				</view>
			</view>
			<!-- 滚动待处理 -->
			<view v-if="typeIndex == 0" class="rolling">
				<u-tabs name="cate_name" :bar-height="10" active-color="#FDC345" :list="list" :is-scroll="true" :current="current" @change="change"></u-tabs>
			</view>
			<!-- 订单查询 -->
			<view v-if="typeIndex == 1" class="Thequery">
				<view>
					<view>08.11</view>
					<view><image src="../../static/home/jiantouq.png" mode=""></image></view>
				</view>
				<view></view>
				<view>
					<view @tap="Add(index)" :class="{ name: typeStatus === index }" v-for="(item, index) in StatusType" :key="index">{{ item.name }}</view>
				</view>
				<view @tap="sheet">
					<view>预</view>
					<view><image src="../../components/min-collapse/arrow.png" mode=""></image></view>
				</view>
			</view>
			<!-- 滚动订单查询 -->
			<view v-else class="rolling"></view>
		</view>
		<!-- 子组件 -->
		<view class="Child">
			<!-- 新订单 -->
			<view v-if="current == 0 && typeIndex == 0">
				<neworders :Time="Time" :orderlist="orderlist"></neworders>
			</view>
			<!-- 催单取消单 -->
			<view v-if="current != 0 && typeIndex == 0">
				<view class="reminder" style="height: 70vh;overflow-y: auto;">
					<you-scroll ref="scroll" @onPullDown="onPullDown" @onScroll="onScroll" @onLoadMore="onLoadMore">
						<distribution :List="List" :listType="listType" :type="current"></distribution>
						<u-divider bg-color="#F1F1F1" color="#333333">到底了</u-divider>
					</you-scroll>
				</view>
			</view>
			<!-- 订单查询 -->
			<view v-if="typeIndex == 1">
				<OrderQuery></OrderQuery>
			</view>
		</view>
		<!-- 开门营业弹出层 -->
		<view class="foolNae">
			<u-popup v-model="isfisee" mode="bottom">
				<view class="floor">
					<view>关店</view>
					<view>开店</view>
					<view>取消</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
import { mapActions, mapState } from 'vuex';
import { toast } from '@/utils/toast';
import request from '@/utils/request';
import statusBar from '../../components/statusBar/statusBar.vue';
import neworders from './components/neworders.vue'; //新订单子组件
import distribution from './components/distribution.vue'; //列表子组件
import OrderQuery from './components/OrderQuery.vue';
import youScroll from '@/components/you-scroll';
export default {
	components: {
		statusBar,
		neworders,
		distribution,
		OrderQuery,
		youScroll
	},
	computed: {
		...mapState('user', ['userinfo'])
	},
	data() {
		return {
			isfisee: false, //关店
			typeIndex: 0,
			Deal: [{ name: '待处理' }, { name: '订单查询' }],
			list: [
				{
					name: '新订单'
				},
				{
					name: '配送异常'
				},
				{
					name: '催单'
				},
				{
					name: '取消单'
				},
				{
					name: '退款'
				}
				// {
				// 	name: '出餐慢'
				// }
			],
			current: 0,
			StatusType: [
				{
					name: '全部'
				},
				{
					name: '进行中'
				},
				{
					name: '取消/退款'
				}
			],
			typeStatus: 0,
			orderlist: [],
			listType: 1,
			currentPage: 1,
			List: [],
			Time: [] //倒计时
		};
	},
	created() {
		this.New();
	},
	methods: {
		camp() {
			this.isfisee = true;
		},
		clickAdd(index) {
			this.typeIndex = index;
		},
		Add(index) {
			this.typeStatus = index;
		},
		change(index) {
			this.current = index;
			if (this.current == 0) {
				this.listType = 1;
				this.New();
			} else if (this.current == 1) {
				this.listType = 2;
				this.Newlist();
			} else if (this.current == 2) {
				this.listType = 3;
				this.Newlist();
			} else if (this.current == 3) {
				this.listType = 4;
				this.Newlist();
			} else if (this.current == 4) {
				this.listType = 5;
				this.Newlist();
			}

			console.log(this.listType, 4444);
		},
		// 预订单
		sheet() {
			uni.navigateTo({
				url: '/pages/Delivery/sheet'
			});
		},
		// 自提
		Since() {
			uni.navigateTo({
				url: '/pages/Delivery/Since'
			});
		},
		// 待处理新订单
		New() {
			uni.showLoading({
				title: '加载中',
				duration: 2000
			});

			request('/merchant/order/order-list', 'post', {
				page: 1,
				state: this.listType
			}).then(res => {
				console.log(res.data.data, '新订单');
				if (res.data.code == 1) {
					this.orderlist = res.data.data.data;
					this.Time = res.data.data.set;
					console.log(this.Time, 778);
					setTimeout(() => {
						uni.hideLoading();
					}, 500);
				}
				try {
					this.orderlist = JSON.parse(res.data).data.data;
					// 时间
					this.Time = JSON.parse(res.data).data.set;
				} catch (e) {
					//TODO handle the exception
					this.orderlist = res.data.data.data;
					this.Time = res.data.data.set;
				}
			});
		},
		onPullDown(done) {
			// 下拉刷新
			setTimeout(() => {
				this.currentPage += 2;
				this.Newlist();

				done(); // 完成刷新
			}, 1000 * 1);
		},
		onScroll(e) {
			// 监听滚动
			console.log(e.detail.scrollTop, 6666677788);
		},
		onLoadMore(e) {
			// 加载更多
			console.log(3333);
			setTimeout(() => {
				this.currentPage += 2;
				this.Newlist();
			}, 1000 * 1);
		},
		scrollTo() {
			this.$refs.scroll.goTop();
		},
		Newlist() {
			uni.showLoading({
				title: '加载中',
				duration: 2000
			});

			request('/merchant/order/order-list', 'post', {
				size: this.currentPage,
				page: 1,
				state: this.listType
			}).then(res => {
				console.log(res.data.data, '新订单');
				if (res.data.code == 1) {
					this.List = res.data.data.data;
					setTimeout(() => {
						uni.hideLoading();
					}, 500);
				}
				try {
					this.List = JSON.parse(res.data).data.data;
				} catch (e) {
					//TODO handle the exception
					this.List = res.data.data.data;
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.delivery {
	.header {
		background: $bg1-color;
		width: 100%;
		overflow-x: hidden;
		overflow-y: hidden;

		.stores {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20upx 29upx 0upx 30upx;

			& > view:nth-child(1) {
				display: flex;
				align-items: center;
				image {
					width: 30upx;
					height: 30upx;
				}
				& > view {
					font-size: 30upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: $bg-color;
					margin-left: 10upx;
				}
			}
			& > view:nth-child(2) {
				width: 160upx;
				height: 61upx;
				background-color: $bg-background;
				border-radius: 30upx;
				font-size: 30upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: $bg1-color;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		// 待处理
		.processed {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 21upx;
			margin-top: 71upx;
			& > view:nth-child(1) {
				width: 50%;
				height: 68upx;
				background: $bg1-background;
				border-radius: 14upx;
				display: flex;
				align-items: center;
				padding: 0 10upx;
				& > view {
					width: 48%;
					height: 56upx;
					border-radius: 8upx;
					font-size: 30upx;
					font-family: Source Han Sans CN;
					font-weight: bold;
					color: $bg2-color;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.acions {
					width: 48%;
					height: 56upx;
					background: $bg1-color;
					border-radius: 8upx;
					font-size: 30upx;
					font-family: Source Han Sans CN;
					font-weight: bold;
					text-align: center;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
			& > view:nth-child(2) {
				display: flex;
				align-items: center;
				& > view:nth-child(1) {
					width: 204upx;
					height: 68upx;
					background: $bg1-background;
					border-radius: 34upx;
					display: flex;
					align-items: center;

					justify-content: center;

					& > view:nth-child(2) {
						image {
							width: 20upx;
							height: 23upx;
						}
					}
				}
			}
		}
		.rolling {
			margin-top: 40upx;

			/deep/.u-tab-item {
				position: relative;
				display: inline-block;
				text-align: center;
				-webkit-transition-property: background-color, color;
				transition-property: background-color, color;

				color: $bg3-color !important;
			}
		}
	}

	& > view {
		width: 93%;
		border-radius: 10upx;
		margin: 0upx auto;
	}
	// 订单查询
	.Thequery {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 21upx 30upx;
		margin-top: 40upx;
		& > view:nth-child(1) {
			display: flex;
			align-items: center;

			& > view:nth-child(1) {
				font-size: 32upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: $bg3-color;
			}
			& > view:nth-child(2) {
				image {
					width: 27upx;
					height: 30upx;
					display: flex;
				}
			}
		}
		& > view:nth-child(2) {
			width: 2upx;
			height: 26upx;
			background: rgba(221, 221, 221, 1);
			border-radius: 1upx;
		}
		& > view:nth-child(3) {
			display: flex;
			align-items: center;
			width: 60%;
			justify-content: space-between;
			& > view {
				font-size: 32upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: $bg3-color;
			}
			.name {
				font-size: 36upx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: $bg2-color !important;
				border-bottom: 10upx solid #fdc345;
			}
		}
		& > view:nth-child(4) {
			display: flex;
			align-items: center;
			& > view:nth-child(1) {
				font-size: 32upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: $bg3-color;
			}
			& > view:nth-child(2) {
				image {
					width: 27upx;
					height: 30upx;
					display: flex;
				}
			}
		}
	}
	.floor {
		width: 100%;
		& > view {
			border-bottom: 1upx solid #edf0fa;
			font-size: 34upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #343434;
			padding: 39upx 0upx 39upx 0upx;
			text-align: center;
		}
	}
}
</style>
